<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .static{
            width:140px;
            height:140px;
            margin:20px;
            text-align: center;
            line-height: 140px;
            color:#fff;
            font-size: 30px;
        }
        .a{
            background: darkgoldenrod;
        }
        .b{
            border:4px solid darkred;
        }
        .c{
            border-radius: 50%;
            box-shadow:  0 0 5px 0px  #ccc;
        }
        @keyframes move {
            from{
                transform: scale(0) rotate(0);
            }
            to{
                transform: scale(1) rotate(360deg);
            }
        }
        .move{
            animation: move 4s ;
        }
        .img{
            width:160px;
            height:160px;
            margin:20px;
            border-radius: 50%;
            transition: all 2s;
        }

        .a-enter{
            transform: scale(0);
            opacity: 0;
        }
        .a-enter-to{
            transform: scale(1);
            opacity: 1;
        }
        .a-leave{
            transform: scale(1);
            opacity: 1;
        }
        .a-leave-to{
            transform: scale(0);
            opacity: 0;
        }

        @keyframes min {
            0%{
                transform: scale(0) rotate(0) translateX(-100%);
            }
            100%{
                transform: scale(1) rotate(360deg) translateX(0%);
            }
        }
        @keyframes mout {
            0%{
                transform: scale(1) rotate(360deg) translateX(0%);
            }
            100%{
                transform: scale(0) rotate(0) translateX(-100%);
            }
        }
        .fade-enter-active{
            animation: min 2s 0s;
        }
        .fade-leave-active{
            animation: mout 2s 0s;
        }

        .slide-enter-active{
            animation: slideInLeft 1.5s;
        }
        .slide-leave-active{
            animation: slideOutRight  1.5s;
        }

        .zoom-enter-active{
            animation: zoomInDown 1.4s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1.4s;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2 class="move" v-color > {{ title}} </h2>
        <p>
            <input type="text" v-model="title">
        </p>
        <p>
            <input type="text" v-focus >
        </p>
        <h2 v-bg v-demo   >wh2116 - daydayup</h2>
        <h2 v-my-demo v-my-bg >wh2116 - 越努力越幸运 </h2>
        <h2 v-my-args:click.stop.once = "color" v-my-show="show" >获取指令的 相关的参数 </h2>
        <button @click="show=!show">点击切换显示和隐藏1 </button>
        <button v-my-on:click.stop  ="changeshow">点击切换显示和隐藏2 </button>

    </div>
    <script>
        // 全局指令
        var a_b = 1;
        // var a-b = 1;
        Vue.directive("focus",{
            // 当被绑定的元素插入到 DOM 中时
            inserted(el){
                el.focus()
            }
        })

        Vue.directive("color",{
            inserted(el){
                el.style.color = "red"
            }
        })

        Vue.directive("demo",{
            bind(el){
                console.log('bind')
                el.innerHTML += "Demo - Demo - EMO "
            },
            inserted(el){
                console.log('inserted')
            },
            update(el){
                console.log("update")
            },
            unbind(el){
                console.log("unbind ")
            }
        })

        Vue.directive("myDemo",{
            bind(el){
                el.style.color = "red"
                el.innerHTML += "Hello world "
            }
        })
        Vue.directive('myBg',{
            bind(el){
                el.style.background = "pink"

            }
        })
        Vue.directive("myArgs",{
            bind(el,bindings){

            },
            inserted(el,binding){
                console.log(binding) 
                var s = JSON.stringify   // 把json 改为字符串 
                el.innerHTML =
                'name 指令名: '       + s(binding.name) + '<br>' +
                'value 值: '      + s(binding.value) + '<br>' +
                'expression 表达式: ' + s(binding.expression) + '<br>' +
                'argument 参数: '   + s(binding.arg) + '<br>' +
                'modifiers 修饰符: '  + s(binding.modifiers) + '<br>' 
                el.style.color = binding.value;
            }
        })

        Vue.directive("myShow",{
            bind(el,bindings){
                console.log(bindings)
                el.style.display = bindings.value ? 'block':'none'
            },
            update(el,bindings){
                el.style.display = bindings.value ? 'block':'none'
            }
        })
        Vue.directive("myOn",{
            bind(el,bindings){
                console.log(bindings)
                el.addEventListener(bindings.arg,bindings.value,bindings.modifiers.stop);
            }
        })

        Vue.directive('shuibowen',{
            
        })
        const vm = new Vue({
            data:{
                title:"Vue - 自定义实现指令的写法  ",  
                color:'#f50',
                show:true     
            },
            methods:{
                changeshow(){
                    this.show = !this.show
                }
            },
            // 局部注册指令 
            directives:{    
                bg:{
                    inserted(el){
                        el.style.background = "green"
                    }
                }
            },
            mounted(){
                document.querySelectorAll('title')[0].innerHTML = this.title;
                
            }
        }).$mount("#app")
    </script>
    <!-- 
        Vue 也允许注册自定义指令   操作底层DOM  
        代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

        v-on   v-if   v-show    v-for   v-model v-bind v-else v-once v-text v-html  
        指令目的   作用    操作底层DOM  

        指令 directive  
        v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

        全局定义  Vue.directive(name,{钩子函数})   Vue.filter
        局部定义  directives      filters 

        指令钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
        bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
        inserted  插入   被绑定元素插入父节点时调用  1
        update    更新  数据或者DOM节点 更新    n 
        unbind   只调用一次，指令与元素解绑时调用   1

        钩子函数 有几个参数 (el binding )
        el 绑定的DOM
        binding  指令携带的变量数据

        name 指令名
        value 指令的值  最重要  binding.value
        expression  指令对应的表达式 变量名称
        argument   指令的参数     v-on:click  click args   冒号声明的  
        modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   

        v-slot   分发
        v-pre    
        v-cloak  锁住DOM 
     -->
    
</body>
</html>